import React, { useState, useEffect } from "react";
import Mylink from "@/pages/componnets/Mylink";
import { getMoviesDataApi } from "@/utils/api";
import "./list.scss";
const List = () => {
  const [list, setList] = useState([]);
  // 数据请求
  useEffect(() => {
    const fetchData = async () => {
      const result = await getMoviesDataApi();
      setList(result.result);
    };
    fetchData();
    // eslint-disable-next-line
  }, []);
  const spans = (item) => {
    switch (item.version) {
      case "v2d imax":
        return <span className="v2d"></span>;
      case "v3d imax":
        return <span className="v3dm"></span>;
      case "v3d":
        return <span className="v3d"></span>;
      default:
        <span className="dianying"></span>;
        break;
    }
  };
  return (
    <div className="movieslist">
      <ul>
        {list.map((item, index) => {
          return (
            <Mylink to={"/details/" + item.movieid} tag="li" key={index}>
              <img src={item.img.split("w.h").join("")} alt="" />
              <div className="r-main">
                <div className="m-name">
                  <h2>{item.nm}</h2>
                  {spans(item)}
                </div>
                {item.sc ? (
                  <p className="col-glod">
                    观众评分<b>{item.sc}</b>
                  </p>
                ) : (
                  <p className="col-glod">
                    <b>{item.wish}</b>人想看
                  </p>
                )}
                <p className="m-Actor">主演：{item.star}</p>
                <p>{item.showInfo}</p>
              </div>
              {item.showst === 3 ? (
                <button className="f-preShow">购票</button>
              ) : (
                <button className="t-preShow">预售</button>
              )}
            </Mylink>
          );
        })}
      </ul>
    </div>
  );
};
export default List;
